<template>
  <div class="basic-info-bg" v-loading="loading">
    <el-form ref="basicForm" :model="basicForm" :rules="basicRules">
      <el-row v-if="formList.length > 0" :gutter="10" style="display: flex; flex-wrap: wrap;">
        <el-col v-for="(element, index) in formList" :key="index" :span="8" style="padding: 0;">
          <el-form-item :prop="element.fieldCode" style="display: flex; padding: 0 10px 10px 20px;">
            <template slot="label">
              <div style="white-space: nowrap;">
                <span class="show-label">{{ element.fieldName }}</span>
                <el-tooltip v-if="element.fieldCode == 'scrmPhone'" effect="light" content="企微备注手机号不可修改" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                <el-button v-if="['phone', 'idCard', 'scrmPhone'].indexOf(element.fieldCode) != -1" type="text" class="show-btn" @click="showHiddenText(element.fieldCode)">{{isShowText[element.fieldCode] ? '(隐)' : '(显)'}}</el-button>：
              </div>
            </template>
            <!-- DETAIL：输入框如果没有数据，展示中文字“空”主客户手机号已存在就不能再修改！ -->
            <template v-if="operateFlag == 'DETAIL'">
              <el-input v-if="element.enterType === 'INPUT'" :value="basicForm[element.fieldCode] || '空'" :disabled="true" style="width: 100%;"></el-input>
              <el-input v-if="element.enterType === 'TEXT_AREA'" :value="basicForm[element.fieldCode] || '空'" :disabled="true" style="width: 100%;"></el-input>
            </template>
            <!-- EDIT：输入框 -->
            <template v-else>
              <el-input v-if="element.enterType === 'INPUT'" v-model="basicForm[element.fieldCode]" :placeholder="'请输入' + element.fieldName" :clearable="true" :disabled="element.isReadOnly == '1' || inputFilter(element.fieldCode)" @change="specailChange(element.fieldCode)" style="width: 100%;"></el-input>
              <el-input v-if="element.enterType === 'TEXT_AREA'" v-model="basicForm[element.fieldCode]" :placeholder="'请输入' + element.fieldName" :clearable="true" @change="specailChange($event, element.fieldCode)" style="width: 100%;"></el-input>
            </template>
            <!-- 普通下拉框 -->
            <el-select v-if="element.enterType === 'SELECT'" v-model="basicForm[element.fieldCode]" :placeholder="'请选择' + element.fieldName" :multiple="element.multiple || false" style="width: 100%;" :disabled="operateFlag == 'DETAIL'" @change="specailChange(element.fieldCode)">
              <el-option v-for="item in enumOpt[element.fieldCode]" :key="item.dictValue" :value="item.dictValue" :label="item.dictLabel" />
            </el-select>
            <!-- 单选 -->
            <el-radio-group v-if="element.enterType === 'RADIO'" v-model="basicForm[element.fieldCode]" :disabled="operateFlag == 'DETAIL'" @change="specailChange(element.fieldCode)">
              <el-radio v-for="item in enumOpt[element.fieldCode]" :key="item.dictValue" :label="item.dictValue">{{item.dictLabel}}</el-radio>
            </el-radio-group>
            <!-- 复选框 -->
            <el-checkbox-group v-if="element.enterType === 'CHECKBOX'" v-model="basicForm[element.fieldCode]" :disabled="operateFlag == 'DETAIL'" @change="specailChange(element.fieldCode)">
              <el-checkbox v-for="item in enumOpt[element.fieldCode]" :label="item.dictValue" :key="item.dictValue">{{item.dictLabel}}</el-checkbox>
            </el-checkbox-group>
            <!-- 开关 -->
            <el-switch v-if="element.enterType === 'SWITCH'" v-model="basicForm[element.fieldCode]" :disabled="operateFlag == 'DETAIL'" active-color="#13ce66" inactive-color="#ff4949" @change="specailChange(element.fieldCode)"></el-switch>
            <!-- 日期区间 -->
            <el-date-picker v-if="element.enterType === 'DATE_RANGE'" v-model="basicForm[element.fieldCode]" type="daterange" range-separator="至" :start-placeholder="element.fieldName + '开始日期'" :end-placeholder="element.fieldName + '结束日期'" :value-format="element.formate" style="width: 100%;" @change="specailChange(element.fieldCode)"></el-date-picker>
            <!-- 日期 -->
            <el-date-picker v-if="element.enterType === 'DATE'" v-model="basicForm[element.fieldCode]" type="date" key="d" placeholder="选择日期" :picker-options="element.pickerOptions || {}" :value-format="element.dateFormate || 'yyyy-MM-dd'" :disabled="operateFlag == 'DETAIL'" style="width: 100%;" @change="specailChange(element.fieldCode)"></el-date-picker>
            <!-- 月份 -->
            <el-date-picker v-if="element.enterType === 'MONTH'" v-model="basicForm[element.fieldCode]" type="month" key="m" placeholder="选择月份" :value-format="element.dateFormate || 'yyyy-MM'" :picker-options="element.pickerOptions || {}" :disabled="operateFlag == 'DETAIL'" style="width: 100%;" @change="specailChange(element.fieldCode)"></el-date-picker>
            <!-- 年份 -->
            <el-date-picker v-if="element.enterType === 'YEAR'" v-model="basicForm[element.fieldCode]" type="year" key="y" placeholder="选择年份" :value-format="element.dateFormate || 'yyyy'" :picker-options="element.pickerOptions || {}" :disabled="operateFlag == 'DETAIL'" style="width: 100%;" @change="specailChange(element.fieldCode)"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getBasicInfoData, findNo, } from '@/api/customer/customerManage';

export default {
  name: 'BasicInfo',
  props: {
    operateFlag: {
      type: String,
      default: 'DETAIL'
    }
  },
  data() {
    return {
      basicForm: {},
      basicRules: {},
      enumOpt: {},
      formList: [],
      loading: false,
      // 显示加密
      isShowText: {},
      pwdObj: {},
      realObj: {},
      showTextEdit: {},
      whiteText: '空'
    }
  },
  created() {
    this.getBasicInfoDataFn();
  },
  methods: {
    inputFilter(key) {
      return this.operateFlag == 'DETAIL' || key == 'phone' && this.basicForm[key] != '' && this.basicForm[key] != null && !this.showTextEdit[key];
    },
    getBasicInfoDataFn() {
      this.loading = true;
      getBasicInfoData({ sid: this.$route.query.sid }).then(res => {
        if (res.code == 200) {
          this.basicForm = res.data.fieldMap;
          let arr = res.data.fieldList;
          this.catchEnumFn(arr);
          for (let i = 0; i < arr.length; i++) {
            const element = arr[i];
            this.pwdObj[element.fieldCode] = this.basicForm[element.fieldCode];
            this.realObj[element.fieldCode] = this.basicForm[element.fieldCode];
            this.showTextEdit[element.fieldCode] = false;
            this.isShowText[element.fieldCode] = false;
          }
          this.getFindNo();
        }
      })
    },
    catchEnumFn(arr) {
      // 枚举
      let promiseList = []
      for (let i = 0; i < arr.length; i++) {
        if(arr[i].dictType) promiseList[i] = this.getDicts(arr[i].dictType)
      }
      Promise.all(promiseList).then((res) => {
        for (let i = 0; i < arr.length; i++) {
          if(arr[i].dictType) this.enumOpt[arr[i].fieldCode] = res[i].data
        }
        this.formList = arr;
        this.loading = false;
      })
    },
    showHiddenText(val) {
      this.isShowText[val] = !this.isShowText[val]
      if (this.isShowText[val]) {
        this.basicForm[val] = this.realObj[val];
      } else {
        this.basicForm[val] = this.pwdObj[val];
      }
    },
    getFindNo() {
      //获取证件号、手机号
      const params = {
        sid: this.$route.query.sid,
        customerType: '1'
      }
      findNo(params).then((res) => {
        if (res.code === 200) {
          this.realObj.scrmPhone = res.data.scrmPhone;
          this.realObj.idCard = res.data.idCard;
          this.realObj.phone = res.data.phone;
        }
      });
    },
    // 恢复原来的数据
    resetForm(data) {
      this.basicForm = data;
    },
    // 录入框控制
    specailChange(key) {
      this.showTextEdit[key] = true;
    },
  },
}
</script>

<style lang="scss" scoped>
.basic-info-bg{
  padding: 0 16px 10px 0;
  min-height: 178px;
  .show-btn{
    cursor: pointer;
  }
  .show-label{
    font-weight: 400;
  }
  ::v-deep .el-form-item--small .el-form-item__content {
    display: inline-block;
    width: 100%;
  }
  ::v-deep .el-form-item--small .el-form-item__label{
    padding: 0;
  }
}
</style>